<template>
	<view class="indexs">
		<u-navbar 
		 :safeAreaInsetTop="true"
		 bgColor="#F5FAFF"
		 :placeholder="true"
		 height='0px'
		  >
		  <view
		        class="u-nav-slot"
		        slot="left"
		        >
				</view>
		  </u-navbar>
		<view class="indexs-headr">
			<view class="indexs-headr-measure">
				<image src="@/static/images/login/logoText.png" mode="heightFix"></image>
			    <!-- <text>疯传速藏</text> -->
				<view class="indexs-headr-measure-search" @click="toPage('/pages/shop/seach')">
						<u--input
						    style="margin-left: 15rpx;"
						    border="none"
						    placeholder="搜索数字藏品名称"
						    prefixIcon="search"
							:disabled="true"
							disabledColor="#fff"
						    prefixIconStyle="font-size: 22px;color: #909399"
						></u--input>
				</view>
			</view>
			<view class="indexs-headr-bnnar">
				 <u-swiper
				 keyName="thumb" 
				 indicator radius="4" 
				 indicatorMode="dot" 
				 height="130"
				 :list="bnnarList"
				  @click="bannerClick"    
				 ></u-swiper>
			</view>
			<view class="Announcements">
				<image class="Announcements-icon" style="width: 40rpx;height: 42rpx;" src="@/static/images/login/gg.png" mode=""></image>
			   <u-notice-bar 
						:text="announcements" 
						direction="column" 
						speed="250" 
						icon=""
						@click="conHref"
						color="#16172F"
						>
						</u-notice-bar>
			    <image @click="toPage('/pages/Info/index')" class="Announcements-image" src="@/static/images/login/allAnnouncements.png" mode="" style="width: 31rpx;height: 24rpx;"></image>
			 </view>
		</view>
		
		<view class="indexs-center">
			<view class="indexs-center-measure">
				<view class="indexs-center-measure-item" @click="toPage('/pages/Invite/index')">
					<view class="indexs-center-measure-item-text">
						<text style="margin-left: 44rpx;">邀请好友</text><br>
						<text style="margin-left: 44rpx;">好友注册领取奖励</text>
					</view>
					<view class="indexs-center-measure-item-img">
						<image src="@/static/images/login/yaoqing.png" mode=""></image>
					</view>
				</view>
				<view class="indexs-center-measure-boder"></view>
				<!-- @click="toPage('/pages/Info/index')" -->
				<view class="indexs-center-measure-item" @click="toNone">
					<view class="indexs-center-measure-item-text">
						<text>抽奖活动</text><br>
						<!-- <view class="newmeasure"></view> -->
						<text>重磅好礼等你来拿</text>
					</view>
					<view class="indexs-center-measure-item-img">
						<image src="@/static/images/info/choujiang.png" mode=""></image>
					</view>
				</view>
				
				
			</view>
			<view class="indexs-center-oneimg" v-if="special_list[0]" @tap="toPage(`/subpage/Product/details?id=${special_list[0].id}`)">
				<view class="indexs-center-oneimg-shopImg" >
					<!-- <u--image 
					width="calc(100vw - 120rpx)" 
			        height="378px"
					:src="special_list[0].thumb" 
					mode="aspectFill" >
					  <template v-slot:loading>
					    <u-loading-icon color="red"></u-loading-icon>
					  </template>
					</u--image> -->
					<fr-image class="img" loading-ing-img="two-balls" :src="special_list[0].thumb"  mode="widthFix" :complete-transition="true"/>

				    <view class="nullimg" v-if="!special_list[0].sell_status && (special_list[0].all_count==special_list[0].sale_count) && !(special_list[0].time>0)">
				    	<image src="@/static/images/login/bianzuname.png" mode=""></image>
				    </view>
					<view class="timeImg" color="#fff" v-if="special_list[0].time>0">
						<u-count-down  :time="special_list[0].time" format="HH:mm:ss" @finish="onFinish(special_list[0].id)"> </u-count-down>
							<!-- <text></text> v-if="item.time>0"  -->
					</view> 
				</view>
				<view class="indexs-center-oneimg-shopIfon" >
					<view class="indexs-center-oneimg-shopIfon-left">
						<view class="shopName">
							<text>{{special_list[0].title}}</text>
						</view>
						<view class="shopprice">
							<text>¥{{special_list[0].base_price}}</text>
							<view class="shopNumtext">
								<text>限量</text>
							</view>
							<view class="shopNum">
								<text>{{special_list[0].all_count}}份</text>
							</view>
						</view>
					</view>
					<view class="indexs-center-oneimg-shopIfon-right">
						<text>立即购买</text>
						<image src="@/static/images/login/cyoujiantou.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	    <view class="indexs-list">
	    	<view class="indexs-list-item" @tap="toPage(`/subpage/Product/details?id=${item.id}`)" v-for="(item,index) in special_list" :key="index" v-if="index!=0">
	    		<view class="item-shopimg">
	    			<image :src="item.thumb" mode="aspectFill"></image>
					<!-- <fr-image class="img" loading-ing-img="looming" loadingHeight='450rpx' :src="item.thumb"  mode="aspectFill" :complete-transition="true"/> -->
	    		    <view class="item-nullimg" v-if="!item.sell_status && (item.all_count==item.sale_count) && !(item.time>0)">
	    		    	<image src="@/static/images/login/bianzuname.png" mode=""></image>
	    		    </view>
					<view class="timeImg" color="#fff" v-if="item.time>0">
						<u-count-down  :time="item.time" format="HH:mm:ss" @finish="onFinish(item.id)"> </u-count-down>
							<!-- <text></text> v-if="item.time>0"  -->
					</view>
				</view>
				<view class="item-shopInfo">
					<view class="item-shopInfo-name">
						<text>{{item.title}}</text>
					</view>
				     <view class="item-shopInfo-money">
						 <text>￥</text>
				     	<text>{{item.base_price}}</text>
				     </view> 
				</view>
				<view class="item-shopname">
					<view class="item-shopname-info">
						<image :src="item.portrait" mode=""></image>
					    <text>{{item.user_name.length>4?item.user_name.slice(0,4)+'...':item.user_name}}</text>
					</view>
					<view class="item-shopname-num">
						<text>限量{{item.all_count}}份</text>
					</view>
				</view>
	    	</view>
			<block v-if="special_list.length<1">
				<Empty style="margin: auto;" text="暂无藏品"></Empty>
			</block>
	    </view>
	<!-- 	<block v-if="!loading&&calendar_list.length<1">
			<Empty text="暂无发售"></Empty>
		</block> -->
		<view style="height: 60px;">
			
		</view>
		<updateApp :updateData="getUpdataData" ref="updataApp" @finshUpdate="getFinshUpdate"></updateApp>
	</view>
</template>

<script>
	import frImage from '@/components/fr-image/fr-image.vue'
	import {
		mixin
	} from '@/Mixins/mixin.js'
	import Empty from "@/components/Empty.vue"
	import updateApp from '@/components/updateApp.vue';
	export default{
		mixins: [mixin],
		components: {
			updateApp,
			Empty,
			'fr-image':frImage
		},
		data(){
			return{
			    banner:'',// banner 列表
				bnnarList:[], // bnnar 图片url 列表
				nlist:'' ,// 公告列表
				announcements:[],//公告文字列表
				page:1,
				size:10,
				special_list:[],
				total:0,
				getUpdataData: {
					href: '', //这是下载的url,
					desc: '', //描述，隔行的最好加上<br> desc.replace(/\r\n/g,'<br>'),
					version_name: '',
					type: ''
				}
			}
		},
		onShow() {
			//#ifdef APP-PLUS
			plus.runtime.getProperty(plus.runtime.appid, inf => {
				var c = inf.version;
				var t = plus.os.name.toLocaleLowerCase() == 'ios' ? 2 : 1;
				this.get(c, t);
			});
			//#endif
		},
		onLoad() {
			this.getbanner()
			this.getnList()
			this.specialList()
		},
		onPullDownRefresh() {
			this.bnnarList = []
			this.announcements = []
			this.special_list = []
			this.page = 1
			this.specialList()
			this.getbanner()
			this.getnList()
			// this.integralList = []
			// if (this.current == 0) {
				
			// } else if (this.current == 1) {
			// 	this.sellCalendar()
			// } else if (this.current == 2) {
			// 	this.getList()
			// } else {
			// 	this.getIntegral(this.page)
			// }
		},
		onReachBottom(){
			// console.log(1)
			if(this.total===this.special_list.length)return
			// this.page+=1
			this.specialList()
				// console.log(11)
		},
		methods:{
			conHref(i){
				uni.navigateTo({
					url:`/pages/Info/detail?id=${this.nlist[i].id}`
				})
				// console.log(i)
			},
			toNone(){
				this.$u.toast("敬请期待")
			},
			async get(c, t) {
				let res = await this.$http({
					url: this.$api.getversion,
					method: 'get',
					hideLoading: true,
					data: {
						client_version: c,
						client_type: t
					}
				})
				console.log(res);
				if (res.data.upgrade.length != 0) {
					this.getUpdataData.href = res.data.upgrade.version_url
					this.getUpdataData.desc = res.data.upgrade.remarks.replace(/\r\n/g, '<br>')
					this.getUpdataData.version_name = res.data.upgrade.version
					this.getUpdataData.show = true
					this.getUpdataData.type = t
					uni.hideTabBar()
				}
			},
			getFinshUpdate (e) {},
			// 数字藏品
			async specialList() {
				let data = await this.$http({
					url: this.$api.specialList,
					method: 'GET',
					hideLoading: true,
					data: {
						page: this.page,
						page_size: this.size,
					}
				})
				// console.log('[数字藏品]',JSON.stringify(data))
				let list = data.data
				if (data.code == 200) {
					if (this.page == 1) {
						this.special_list = []
					}
					list.data.map(item => {
						let sell_time = item?.sell_time
						if (sell_time) {
							let oldTime = new Date(sell_time.replace(/-/g, '/')).getTime()
							let time = oldTime - new Date().getTime()
							if (time > 0 && time > 86400000) {
								item.show = true
								item.sell_date = item.sell_time.substring(5, 10);
								item.sell_t = item.sell_time.substring(11, 16);
			
							} else if (time > 0 && time < 86400000) {
								item.show1 = true
							} else {
								item.show = false
							}
							item.time = time
						}
			
					})
					this.total = list.total
					if (this.special_list.length < list.total) {
						this.special_list = this.special_list.concat(list.data)
						this.page += 1
					}
				} else {
					return []
				}
			},
			// banner接口
			async getbanner() {
				let banner = await this.articleList(3)
				if (banner.code == 200) {
					this.banner = banner.data
					banner.data.forEach(item=>{
						this.bnnarList.push(item.thumb)
					})

				}
			},
			onFinish(id) {
				// console.log('[id]',id)
				let index = this.special_list.findIndex(item => {
					return item.id == id
				})
				this.special_list[index].show = false
			},
			// 公告
			async getnList() {
				let list = await this.articleList(2, 1, 5)
				if (list.code == 200) {
					this.nlist = list.data
					// console.log(this.nlist)
					if (this.nlist) {
						this.announcements = []
						this.nlist.forEach((el,index) => {
						
							this.announcements.push(el.title)
							
						})
					}
				}
			},
			// 点击轮播图
			bannerClick(e) {
				if (this.bnnarList[e].special_ids) {
					this.toPage(`/pages/activities/blindBox/index?id=${this.banner[e].special_ids}`);
				} else
				if (this.bnnarList[e].link_url) {
					//#ifdef H5
					window.open(this.bnnarList[e].link_url)
					//#endif
					// #ifdef APP
					plus.runtime.openURL(this.bnnarList[e].link_url)
					// #endif
				} else
				if (this.bnnarList[e].out_type == 2 && this.bnnarList[e].out_id) {
					this.toPage(`/pages/Info/detail?id=${this.banner[e].out_id}`);
				} else
				if (this.bnnarList[e].out_type == 1 && this.banner[e].special_ids) {
					this.toPage('/subpage/Product/details?id=' + this.banner[e].special_ids);
				} else {
					this.toPage(`/pages/Info/detail?id=${this.banner[e].id}`);
				}

			
			},
		}
	}
</script>

<style scoped lang="scss">
	
	.indexs{
		&-headr{
			padding-top: 20rpx;
			width: 100vw;
			// height: 517rpx;
			background: linear-gradient(136deg, #FAFCFF 0%, #F3F9FF 28%, #E9F2FE 100%);
			// padding-bottom: 40rpx;
		    &-measure{
				display: flex;
				align-items: center;
				margin-right: 30rpx;
				image{
					margin-left: 30rpx;
					height: 36rpx;
				}
				// text{
				// 	margin-left: 12rpx;
					
				// 	font-size: 36rpx;
				// 	font-family: HelloFont-WenYiHei, HelloFont;
				// 	font-weight: normal;
				// 	color: #16172F;
				// }
				&-search{
					display: flex;
					align-items: center;
					margin-left: 60rpx;
					
					width: calc(100vw - 306rpx - 30rpx);
					height: 76rpx;
					background: #FFFFFF;
					border-radius: 76rpx;
					overflow: hidden;
				}
			}
			&-bnnar{
				width: calc(100vw - 60rpx);
				margin: auto;
				margin-top: 27rpx;
				// margin-bottom: 40rpx;
			}
		}
		&-center{
			padding-top: 20rpx;
			&-measure{
				display: flex;
			    
				&-item{
					width: 50vw;
					display: flex;
					align-items: center;
					justify-content: space-around;
					&-text{
						width: calc(100% - 125rpx);
						text:nth-child(1){
							margin-left: 30rpx;
							font-size: 32rpx;
							font-family: PingFangSC-Semibold, PingFang SC;
							font-weight: 600;
							margin-top: 10px;
						}
						text:nth-child(3){
							margin-left: 30rpx;
						    position: absolute;
							font-size: 22rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #777777;
						}
						text:nth-child(4){
							margin-left: 30rpx;
				            position: absolute;
							font-size: 22rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #777777;
						}
						.newmeasure{
							position: absolute;
							left: 159rpx;
							margin-top: -50rpx;
							width: 10rpx;
							height: 10rpx;
							border-radius: 50%;
							background: #FF553E;
						}
					}
					&-img{
						margin-left: 21rpx;
						margin-top: 49rpx;
						width: 80rpx;
						height: 80rpx;	
						margin-right: 44rpx;
						image{
						  width: 80rpx;
						  height: 80rpx;	
						}
					}
				}
			}
		    &-oneimg{
				width: calc(100vw - 60rpx);
				padding-bottom: 20rpx;
				// height: 790rpx;
				background: #FFFFFF;
				box-shadow: 4rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.15);
				border-radius: 2rpx;
				margin: auto;
				margin-top: 40rpx;
				padding-top: 30rpx;
				&-shopImg{
					position: relative;
					margin: auto;
					width: calc(100% - 60rpx);
					border-radius: 4rpx;
				    .img{
				    	width: calc(100%);
				    	position: none !important;
				    	// height: 200px;
				    }
					// overflow: hidden;
					.nullimg{
						position: absolute;
						top:calc(50% - 66rpx);
						left: calc(50% - 66rpx);
						width: 132rpx;
						height: 132rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.timeImg{
						    top: 0;
						    right: 0;
							position: absolute;
							width: 140rpx;
							height: 40rpx;
							background-image: url("@/static/images/login/bianzutime.png");
						    background-size: 100% 100%;
							text-align: center;
							line-height: 40rpx;
						
							text{
								font-size: 24rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: #FFFFFF;
							    margin-left: 20rpx;
								
							}
						}
					
				}
			    &-shopIfon{
			    	display: flex;
					align-items: center;
					justify-content: space-between;
			    	&-left{
						margin-left: 30rpx;
			    		.shopName{
			    		   font-size: 28rpx;
			    		   font-family: PingFangSC-Medium, PingFang SC;
			    		   font-weight: 500;
			    		   color: #000618;
						  
			    		}
						.shopprice{
							display: flex;
							align-items: center;
							font-size: 40rpx;
							font-family: DINAlternate-Bold, DINAlternate;
							font-weight: bold;
							color: #16172F;
							
							.shopNumtext{
								margin-left: 20rpx;
								margin-top: -10rpx;
								width: 68rpx;
								// height: 42rpx;
								padding: 5rpx;
								border:1px solid #979797;
								border-radius: 3rpx 0px 0px 3rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								text{
									font-size: 28rpx;
									font-family: DINAlternate-Bold, DINAlternate;
									font-weight: bold;
									color: #8C93AA;
								}
							}
							.shopNum{
								margin-top: -10rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								padding: 5rpx;
								min-width: 48rpx;
								// height: 42rpx;
								border:1px solid #979797;
								
								border-radius: 3rpx 0px 0px 3rpx;
								border-left: none;
								text{
									font-size: 28rpx;
									font-family: DINAlternate-Bold, DINAlternate;
									font-weight: bold;
									color: #8C93AA;
								}
							}
						}
						
			    	}
			        &-right{
						padding: 0 32rpx;
						height: 72rpx;
						background: #FFFFFF;
						border-radius: 36px;
						border: 1px solid #979797;
						margin-right: 30rpx;
						text:nth-child(1){
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #16172F;
							line-height: 72rpx;
						}
						image{
							margin-left: 20rpx;
							width: 31rpx;
							height: 20rpx;
						}
					}
				}
			}
		}
	    &-list{
			display: flex;
			flex-wrap: wrap;
			// justify-content: center;
			align-items: center;
			&-item{
				margin-top: 35rpx;
				margin-bottom: -10rpx;
				width: calc(50vw - 45rpx);
				box-shadow: 0px 4rpx 8rpx 0rpx   rgba(0,0,0,0.15);
				border-radius:10rpx;
				// background-color: #000618;
				// height: 200px;
				margin-left: 30rpx;
				overflow:hidden;
				box-sizing:border-box;
				padding:20rpx;
				.item-shopimg{
					width: 100%;
					height: 450rpx;
					border-radius: 2rpx;
					overflow: hidden;
					position: relative;
					.img{
					width:calc(50vw - 45rpx);
					position: none !important;
						// height: 200px;
					}
					image{
						width: 100%;
						height: 100%;
					}
					.item-nullimg{
						position: absolute;
						top: calc(200rpx - 79rpx);
						left: calc(50% - 63rpx);
						width: 138rpx;
						height: 127rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					
					.timeImg{
						    top: 0;
						    right: 0;
							position: absolute;
							width: 140rpx;
							height: 40rpx;
							background-image: url("@/static/images/login/bianzutime.png");
						    background-size: 100% 100%;
							text-align: center;
							// line-height: 40rpx;
						    display: flex;
							align-items: center;
							::v-deep .u-count-down{
								 .u-count-down__text{
									font-size: 24rpx !important;
									font-family: PingFangSC-Medium, PingFang SC;
									font-weight: 500;
									color: #FFFFFF;
									margin-left: 30rpx !important;
								    line-height: 40rpx;
								}
							}
							text{
								font-size: 24rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: #FFFFFF;
							    margin-left: 20rpx;
								
							}
						}
				}
				.item-shopInfo{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.item-shopInfo-name{
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #16172F;
					}
					.item-shopInfo-money{
						text:nth-child(1){
							font-size: 12rpx;
							font-family: DINAlternate-Bold, DINAlternate;
							font-weight: bold;
							color: #16172F;
						}
						text:nth-child(2){
							font-size: 28rpx;
							font-family: DINAlternate-Bold, DINAlternate;
							font-weight: bold;
							color: #16172F;
						}
					}
				}
			    .item-shopname{
					margin-top: -15rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.item-shopname-info{
						display: flex;
						align-items: center;
						image{
							width: 32rpx;
							height: 32rpx;
						}
						text{
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #777E90;
							margin-left: 5rpx;
						}
					}
				    .item-shopname-num{
						text{
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #777E90;
						}
					}
				}
			}
		}
	}
	::v-deep .timeImg{
		 .u-count-down{
			 .u-count-down__text{
				font-size: 24rpx !important;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				margin-left: 20rpx;
				line-height: 40rpx;
			}
		}
	}
	::v-deep .u-swiper-indicator__wrapper__dot{
		width: 12rpx;
		height: 10rpx;
		background: #FFFFFF;
		// opacity: 0.5;
		border-radius: 0px;
		 transform: skewX(-15deg);
	}
	::v-deep .u-swiper-indicator__wrapper__dot--active{
		width: 30rpx;
		height: 10rpx;
		background: #FFFFFF !important;
		background-color: #FFFFFF;
		// opacity: 0.5;
		border-radius: 0px;
		 transform: skewX(-15deg);
	}
	.indexs-center-measure-boder{
		width: 1px;
		height: 71rpx;
		background: #EBEBEB;
		margin-top: 42rpx;
	}
	::v-deep .u-notice-bar{
		background:none !important ;
	}
	.Announcements{
		padding: 20rpx 0;
		display: flex;
		align-items: center;
		&-icon{
			margin-left: 30rpx;
		}
		&-image{
			margin-right: 30rpx;
		}
		
	}
	::v-deep .u-notice-bar{
		margin-top: 4rpx;
		padding: 18rpx 24rpx 18rpx 19rpx !important;
	}
</style>
